<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<style>
    .layui-card-foot {
        position: relative;
        height: 42px;
        line-height: 42px;
        padding: 0 15px;
        border-bottom: 1px solid #f6f6f6;
        color: #333;
        border-radius: 2px 2px 0 0;
        font-size: 14px;
    }
    
    .fangwenliang,
    .caozuoshu {
        width: 100%;
        height: 220px;
    }
    
    .fankuiliang {
        width: 100%;
        height: 400px;
    }
    
    .ciyun {
        width: 100%;
        height: 220px;
    }
    
    .biaogezuo {
        text-align: right;
    }
    
    .biaogeyou {
        text-align: left;
    }
</style>

<body>
    <div style="padding: 10px; background-color: #f2f2f2;">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">操作数</div>
                    <div class="layui-card-body">
                        <div class="fangwenliang" id="fangwenliang"></div>
                    </div>
                    <div class="layui-card-foot dangricaozuoshu">当日操作数:</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">访问量</div>
                    <div class="layui-card-body">
                        <div class="caozuoshu" id="caozuoshu"></div>
                    </div>
                    <div class="layui-card-foot dangrifangwenliang">当日访问量:</div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">词云</div>
                    <div class="layui-card-body">
                        <div class="ciyun" id="ciyun"></div>
                    </div>
                    <div class="layui-card-foot">词云数量:3971</div>
                </div>
            </div>
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">反馈量/反馈处理量</div>
                    <div class="layui-card-body">
                        <div class="fankuiliang" id="fankuiliang"></div>
                    </div>
                    <div class="layui-card-foot zongfankuiliang">总反馈处理量:</div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">管理员登陆信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-size="lg">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <tbody id="dengluxinxi">
                                <tr>
                                    <td class="biaogezuo">登陆人员</td>
                                    <td class="biaogeyou">时间</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-card-foot"> </div>
                </div>
            </div>
        </div>

    </div>

</body>
<script src="../../layui/layui.js"></script>
<script src=".././../js/echarts-echarts-master/echarts/dist/echarts.min.js"></script>
<script src="../../js/echarts-wordcloud-master/dist/echarts-wordcloud.min.js"></script>
<script src="../../js/jquery-3.4.1.js"></script>
<script>
    var url = "http://47.105.118.98:8084/";
    $(document).ready(function() {
            fangwenliang();
            caozuoshu();
            ciyun();
            fankuiliang();
            yonghudengluxinxi();
        })
        // 操作数图表
    function fangwenliang() {
        var myChart1 = echarts.init(document.getElementById('fangwenliang'), 'light');
        option1 = {
            grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '4时', '8时', '12时', '16时', '20时', '24时']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [26, 56, 35, 35, 40, 36, 21],
                type: 'line',
                smooth: true, //是否平滑
                areaStyle: {}
            }],
            textStyle: {
                color: 'rgba(177,177,177)'
            }
        };
        $.ajax({
            url: "http://47.105.118.98:8084/" + "activeness/getACticity",
            method: "post",
            data: "",
            headers: {
                token: localStorage.getItem('token')
            },
            success: function(data) {
                if (data.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }
                console.log(data)
                var time = []
                data.data.times.forEach(item => {
                    time.push(shijiancuozhuanhua(item))
                })

                $('.dangricaozuoshu')[0].innerHTML += data.data.counts[data.data.counts.length - 1]
                option1.xAxis.data = time;
                option1.series[0].data = data.data.counts
                myChart1.setOption(option1)
            },
            error: function(err) {
                console.log(err)
            }
        })

        function shijiancuozhuanhua(time) {
            var date = new Date(time)
            return date.getDate() + "日"
        }

    }
    // 访问量图表
    function caozuoshu() {
        var myChart2 = echarts.init(document.getElementById('caozuoshu'), 'light');
        option2 = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: [],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '访问量',
                type: 'bar',
                barWidth: '60%',
                data: []
            }],
            textStyle: {
                color: 'rgba(177,177,177)'
            }
        };
        $.ajax({
            url: "    http://47.105.118.98:8084/" + "fristpage/loginCount",
            method: "post",
            headers: {
                token: localStorage.getItem('token')
            },
            data: "",
            success: function(data) {
                console.log(data)
                data.data.times.forEach(item => {
                    option2.xAxis[0].data.push(shijiancuozhuanhua(item))
                })
                if (data.data.counts[data.data.counts.length - 1]) {
                    $('.dangrifangwenliang')[0].innerHTML += data.data.counts[data.data.counts.length - 1]
                }
                option2.series[0].data = data.data.counts
                myChart2.setOption(option2)
            },
            err: function(err) {

            }
        })

        function shijiancuozhuanhua(time) {
            var date = new Date(time)
            return date.getDate() + "日"
        }
    }
    // 词云图表
    function ciyun() {
        layui.use('layer')
        var myChart3 = echarts.init(document.getElementById('ciyun'), 'light');

        //跳转代码
        myChart3.on('click', function(params) {
            layer.msg(params.name);
        });

        var colorList = [
            [
                '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700',
                '#6b8e23', '#4ea397', '#3cb371', '#b8860b', '#7bd9a5'
            ],
            [
                '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
                '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
            ],
            [
                '#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe',
                '#bb60b2', '#433e7c', '#f47a75', '#009db2', '#024b51',
                '#0780cf', '#765005', '#e75840', '#26ccd8', '#3685fe',
                '#9977ef', '#f5616f', '#f7b13f', '#f9e264', '#50c48f'
            ]
        ][2];

        var option3 = {
            tooltip: {
                show: true
            },
            series: [{
                name: '热点分析', //数据提示窗标题
                type: 'wordCloud',
                sizeRange: [10, 45], //画布范围，如果设置太大会出现少词（溢出屏幕）
                rotationRange: [0, 0], //数据翻转范围
                //shape: 'circle',
                textPadding: 0,
                autoSize: {
                    enable: true,
                    minSize: 6
                },
                textStyle: {
                    normal: {
                        color() {
                            const arr = [
                                "#1890FF",
                                "#36CBCB",
                                "#4ECB73",
                                "#FBD437",
                                "#F2637B",
                                "#975FE5",
                            ];
                            let index = Math.floor(Math.random() * arr.length);
                            return arr[index];
                        },
                    },
                },
                data: [{
                    "name": "惠济区(村)务监督平台",
                    "value": 100,
                    "symbolSize": 200,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[1],
                            "color": colorList[1]
                        }
                    }
                }, {
                    "name": "信息管理",
                    "value": 1751491,
                    "symbolSize": 132,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[2],
                            "color": colorList[2]
                        }
                    }
                }, {
                    "name": "三资管理",
                    "value": 1642587,
                    "symbolSize": 132,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[3],
                            "color": colorList[3]
                        }
                    }
                }, {
                    "name": "阳光监督",
                    "value": 1524287,
                    "symbolSize": 123,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[4],
                            "color": colorList[4]
                        }
                    }
                }, {
                    "name": "学习园地",
                    "value": 1435649,
                    "symbolSize": 119,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[5],
                            "color": colorList[5]
                        }
                    }
                }, {
                    "name": "管理员管理",
                    "value": 1301903,
                    "symbolSize": 114,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[6],
                            "color": colorList[6]
                        }
                    }
                }, {
                    "name": "行政村信息",
                    "value": 1150224,
                    "symbolSize": 107,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[7],
                            "color": colorList[7]
                        }
                    }
                }, {
                    "name": "发布管理",
                    "value": 1008954,
                    "symbolSize": 100,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[8],
                            "color": colorList[8]
                        }
                    }
                }, {
                    "name": "村告栏",
                    "value": 966638,
                    "symbolSize": 98,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[9],
                            "color": colorList[9]
                        }
                    }
                }, {
                    "name": "资源",
                    "value": 942399,
                    "symbolSize": 97,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[10],
                            "color": colorList[10]
                        }
                    }
                }, {
                    "name": "已处理反馈",
                    "value": 777198,
                    "symbolSize": 88,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[11],
                            "color": colorList[11]
                        }
                    }
                }, {
                    "name": "日志",
                    "value": 726378,
                    "symbolSize": 85,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[12],
                            "color": colorList[12]
                        }
                    }
                }, {
                    "name": "行政村补助",
                    "value": 624773,
                    "symbolSize": 79,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[13],
                            "color": colorList[13]
                        }
                    }
                }, {
                    "name": "村民信息",
                    "value": 620858,
                    "symbolSize": 78,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[14],
                            "color": colorList[14]
                        }
                    }
                }, {
                    "name": "未处理",
                    "value": 565363,
                    "symbolSize": 75,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[15],
                            "color": colorList[15]
                        }
                    }
                }, {
                    "name": "资产",
                    "value": 534676,
                    "symbolSize": 73,
                    "draggable": true,
                    "itemStyle": {
                        "normal": {
                            "shadowBlur": 10,
                            "shadowColor": colorList[16],
                            "color": colorList[16]
                        }
                    }
                }, ]

            }]
        }
        myChart3.setOption(option3)
    }
    // 反馈量图表
    function fankuiliang() {
        var myChart3 = echarts.init(document.getElementById('fankuiliang'), 'light');
        option3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                },
            },
            grid: {
                top: '5%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true
                },
                splitArea: {},
                axisLabel: {

                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: [],

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#fff'],
                        opacity: 0.6
                    }
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                },
                axisTick: {
                    show: false,
                },
            }],
            textStyle: {
                color: 'rgba(177,177,177)'
            },
            series: [{
                name: '反馈量',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 4,
                lineStyle: {
                    normal: {
                        color: "#3685fe",
                        shadowColor: 'rgba(0, 0, 0, 0)',
                        shadowBlur: 0,
                        shadowOffsetY: 3,
                        shadowOffsetX: 3,
                    },
                },
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#111',
                        fontSize: 15
                    }
                },
                itemStyle: {
                    color: "#3398db",
                    borderColor: "#3398db",
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: true
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,202,149,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,202,149,0)'
                        }], false),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: []
            }, {
                name: '反馈处理量',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 4,
                lineStyle: {
                    normal: {
                        color: "#7dc3fe",
                        shadowColor: 'rgba(0, 0, 0, 0)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: false,
                    position: 'top',
                    textStyle: {
                        color: '#1890ff',
                        fontSize: 15
                    }
                },
                itemStyle: {
                    color: "#26ccd8",
                    borderColor: "#26ccd8",
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: true
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,202,149,0.3)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,202,149,0)'
                        }], false),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: []
            }, ]
        };
        $.ajax({
            url: "    http://47.105.118.98:8084/" + "fristpage/feedbackCountByMonth",
            method: "post",
            data: "",
            headers: {
                token: localStorage.getItem('token')
            },
            success: function(data) {
                if (data.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }
                console.log(data)
                var zongfankuiliang = 0 //总反馈量
                data.data.months.forEach((item, index) => {
                    option3.xAxis[0].data.push(item)
                    option3.series[0].data.push(Number(data.data.AllCountFeedback[index]))
                    zongfankuiliang += Number(data.data.AllCountFeedback[index])
                })
                $('.zongfankuiliang')[0].innerHTML += zongfankuiliang
                option3.series[1].data = data.data.YiChuLi
                myChart3.setOption(option3)
            },
            error: function(err) {
                console.log(err)
            }
        })

    }
    // 用户下面的登陆信息
    function yonghudengluxinxi() {
        $.ajax({
            url: "http://47.105.118.98:8084/" + "general/logger/queryLogin",
            method: "get",
            data: "",
            headers: {
                token: localStorage.getItem('token')
            },
            success: function(data) {
                if (data.code == "401") {
                    window.parent.window.location.href = "../login/index.html"
                }
                console.log(data)
                if (data.code == 200) {

                    data.data.forEach(item => {
                        $('#dengluxinxi')[0].innerHTML +=
                            `
                    <tr>
                        <td class="biaogezuo">` + item.operName + `</td>
                        <td class="biaogeyou">` + timezhuanhuan(item.createdAt) + `</td>
                     </tr>
                    `
                    });
                } else {
                    $('#dengluxinxi')[0].innerHTML +=
                        `
                    <tr>
                        <td class="biaogezuo" colspan="2" style="text-align: center;">` + "暂无用户登陆" + `</td>
                      
                     </tr>
                    `
                }

            },
            error: function(err) {
                console.log(err)
            }
        })
    }
    // 时间戳转换为时间
    function timezhuanhuan(data) {
        if (data !== null) {
            var time = new Date(data);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var hh = time.getHours();
            var mm = time.getMinutes();
            var ss = time.getSeconds();
            return y + "-" + m + "-" + d + "  " + hh + ":" + mm + ":" + ss;
        } else {
            return "";
        }
    }
    // 级别开始
    function jibie(num) {
        if (num == 1) {
            return "区级管理员"
        } else if (num == 2) {
            return "镇级管理员"
        } else {
            return "村级管理员"
        }
    }
    // 获取级别
    function getLevelUpData(id) {
        layui.use(['form'], function() {
            var form = layui.form //表单
            $("#rank").find("option[value=" + id + "]").prop("selected", true);
            form.render();
        })
    }
    // 查看获取镇/村名字--开始
    function getTownVillageName(townId, villageId) {
        var getTownNameById;
        var getVillageNameById;
        var preVillageId = villageId;
        if (townId == "" || townId == null || townId == "null") { // 区级
            $("#areaRank").val("惠济区");
            $("#areaRank").css("opacity", "0.8");
        } else if (villageId == "" || villageId == null || villageId == "null") { // 镇级
            $.ajax({
                url: url + '/town/getonebyid?id=' + townId,
                type: "get",
                success: function(data) {
                    console.log(data);
                    getTownNameById = data.data.name;
                    $("#areaRank").val(getTownNameById);
                    $("#areaRank").css("opacity", "0.8");
                }
            });
        } else { // 村级
            $.ajax({
                url: url + '/town/getonebyid?id=' + townId,
                type: "get",
                success: function(data) {
                    console.log(data);
                    getTownNameById = data.data.name;
                    console.log(getTownNameById);
                    $.ajax({
                        url: url + '/village/getonebyid?id=' + preVillageId,
                        type: "get",
                        success: function(data) {
                            console.log(data);
                            getVillageNameById = data.data.name;
                            // console.log(getVillageNameById);
                            $("#areaRank").val(getTownNameById + "/" + getVillageNameById);
                            $("#areaRank").css("opacity", "0.8");
                        }
                    });
                }
            });
        }
        // 查看获取镇/村名字--结束
    }
    // 判断
    function ceshiname(name) { //验证姓名是否符合规范
        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(name)) {
            alert('用户名不能有特殊字符');
            return 0;
        } else if (/(^\_)|(\__)|(\_+$)/.test(name)) {
            alert('用户名首尾不能出现下划线\'_\'');
            return 0;
        } else if (/^\d+\d+\d$/.test(name)) {
            alert('用户名不能全为数字');
            return 0;
        }
        return 1;
    }

    function ceshiaccount(account) { //验证手机号是否符合规范
        if (!(/^1[3456789]\d{9}$/.test(account))) {
            alert("手机号码有误，请重填");
            return 0;
        }
        return 1;
    }

    function ceshipassword(password1, password2) { //验证两次密码是否相同
        if (password1 != password2) {
            alert("两次密码输入的不一致");
            return 0;
        }
        return 1;
    }
</script>

</html>